<div class="page-layout blank p-24" basePerfectScrollbar>

    <h2>Blank Page</h2>

    <div  class="center">
        <div  class="center" p-24>
            <mat-card  title="按钮粒度">
                ACL原始数据：{{ _baseAlcService.data | json }}
                <button mat-button [baseAlc]="'role-a'">role-a</button>
                <button mat-button [baseAlc]="'role-b'" class="ml-sm">role-b</button>
            </mat-card>
        </div>
    </div>
    <div  class="center">
        <div  class="center" p-24>
            <mat-card title="全量">
                <button mat-button (click)="toggleFull()">
                    <span>{{ full ? '离开' : '设置' }}权限</span>
                </button>
                <p class="pt-md">全量类指系统管理员角色，无任何受限。</p>
            </mat-card>
        </div>
        <div class="center" p-24>
            <mat-card title="角色[role-a]">
                <button mat-button (click)="toggleRoleA()">
                    <span>{{ roleA.length > 0 ? '离开' : '设置' }}权限</span>
                </button>
            </mat-card>
        </div>
        <div class="center" p-24>
            <mat-card title="角色[role-b]">
                <button mat-button (click)="toggleRoleB()">
                    <span>{{ roleB.length > 0 ? '离开' : '设置' }}权限</span>
                </button>
            </mat-card>
        </div>
    </div>
    <mat-card>

    <mat-grid-list class="content with-diagram" id="js-drop-zone" cols="4" rowHeight="1600px" style="background-color: white">
        <mat-grid-tile [colspan]="3" class="canvas" id="js-canvas"></mat-grid-tile>
        <mat-grid-tile [colspan]="1" class="properties-panel-parent" id="js-properties-panel"></mat-grid-tile>
    </mat-grid-list>
    </mat-card>



    <div class="modeler">
        <div id="canvas"></div>
    </div>
    <ul class="buttons">
        <li>
            <a id="js-download-diagram" href title="download BPMN diagram" class="active" (click)="saveDiagram($event)">
                BPMN diagram
            </a>
        </li>
        <li>
            <a id="js-download-svg" href title="download as SVG image" class="active" (click)="saveSVG($event)">
                SVG image
            </a>
        </li>
        <li *ngIf="saveHref">
            <a id="download" [href]="saveHref" [download]="saveName" class="active">下载</a>
        </li>
    </ul>

</div>
